<template>
  <div class="flex-col page">
    <c-title text="上传授权信息"></c-title>
    <div class="flex-col flex-1 group_2">
      <div class="flex-col justify-start items-center self-end text-wrapper">
        <span class="font text_2">上传授权信息</span>
      </div>
      <div class="flex-col self-stretch mt-33-5">
        <div class="flex-row justify-between items-center section_2">
          <div class="flex-row items-center">
            <img class="shrink-0 image_5" src="https://shops.cg500.com/static/twh_downfile_icon.png" />
            <span class="font_2 ml-5-5">下载授权模版</span>
          </div>
          <div @click="downFile" class="flex-col justify-start items-center text-wrapper_2 button"><span class="font_3">下载</span></div>
        </div>
        <div class="flex-row justify-between items-center section_2 mt-23">
          <div class="flex-row items-center">
            <img class="shrink-0 image_6" src="https://shops.cg500.com/static/twh_upload_auth_icon.png" />
            <span class="ml-6 font_2 text_3">上传授权信息</span>
          </div>
          <div @click="uploadFile" v-if="!isShiming" class="flex-col justify-start items-center text-wrapper_3 button"><span class="font_3">上传</span></div>
          <div @click="openUploadPop" v-else class="flex-col justify-start items-center text-wrapper_3 button"><span class="font_3">上传</span></div>
          <!-- <div v-else>
            <van-uploader :after-read="onRead" :multiple="false">
              <div class="photoshow">
                <div class="flex-col justify-start items-center text-wrapper_3 button"><span class="font_3">上传</span></div>
              </div>
            </van-uploader>
          </div> -->
        </div>
      </div>
    </div>
    <van-popup v-model="uploadShow" closeable :style="{ minHeight: '20%', borderRadius: '0.4688rem', width: '80%' }">
      <div class="" style="padding: 20px;">
        <div class="popup-item">
          <span class="font-22">上传授权信息</span>
          <van-uploader :after-read="onRead" name="0" :multiple="false">
            <div class="photoshow">
              <div class="flex-col justify-start items-center text-wrapper_3 button"><span class="font_3">上传</span></div>
              <div class="upload-complete" v-if="imgUrl != ''">已上传</div>
            </div>
          </van-uploader>
        </div>
        <div class="popup-item">
          <span class="font-22">邮箱</span>
          <input type="text" v-model="email" placeholder="请输入邮箱" class="email-input" />
        </div>
        <div class="popup-item">
          <span class="font-22">身份证正面</span>
          <van-uploader :after-read="onRead" name="1" :multiple="false">
            <div class="photoshow">
              <div class="flex-col justify-start items-center text-wrapper_3 button"><span class="font_3">上传</span></div>
              <div class="upload-complete" v-if="idcardFront != ''">已上传</div>
            </div>
          </van-uploader>
        </div>
        <div class="popup-item">
          <span class="font-22">身份证反面</span>
          <van-uploader :after-read="onRead" name="2" :multiple="false">
            <div class="photoshow">
              <div class="flex-col justify-start items-center text-wrapper_3 button"><span class="font_3">上传</span></div>
              <div class="upload-complete" v-if="idcardBack != ''">已上传</div>
            </div>
          </van-uploader>
        </div>
        <div @click="submit" class="flex-col justify-start items-center text-wrapper_3 button" style="margin: 0 auto;margin-top: 20px;"><span class="font_3">提交</span></div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import uploadAuthorizationController from "./uploadAuthorizationController";
export default uploadAuthorizationController;
</script>

<style lang="scss" scoped>
@import "../common/common.css";
.mt-18-5 {
  margin-top: 1.16rem;
}
.mt-33-5 {
  margin-top: 2.09rem;
}
.mt-23 {
  margin-top: 1.44rem;
}
.ml-5-5 {
  margin-left: 0.34rem;
}
.page {
  background-color: #fbf9fc;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.header {
  padding: 1.03rem 0.63rem 0.25rem;
  height: 5.22rem;
}
.image {
  margin-left: 1.25rem;
  margin-right: 0.47rem;
  width: 20.47rem;
  height: 0.75rem;
}
.group {
  padding: 0.34rem 0 0.63rem;
}
.image_2 {
  width: 0.63rem;
  height: 1.09rem;
}
.pos_2 {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.font {
  font-size: 1.13rem;
  font-family: PingFang SC;
  line-height: 1.06rem;
  font-weight: 500;
}
.text {
  color: #222222;
}
.section {
  padding: 0.44rem 0.84rem;
  background-color: #ffffffa6;
  border-radius: 1rem;
}
.pos {
  position: absolute;
  right: 0.031rem;
  top: 50%;
  transform: translateY(-50%);
}
.image_3 {
  width: 1.94rem;
  height: 1.19rem;
}
.image_4 {
  width: 1.09rem;
  height: 1.09rem;
}
.group_2 {
  padding: 1.25rem 1.16rem 17.91rem;
  overflow-y: auto;
}
.text-wrapper {
  margin-right: 1rem;
  padding: 12.69rem 0 0.31rem;
  background-image: url("https://shops.cg500.com/static/twh_auth_topbg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 17.75rem;
}
.text_2 {
  color: #eb433a;
}
.section_2 {
  margin-right: 0.13rem;
  padding: 1.25rem 1.13rem;
  background-color: #fff4f4;
  border-radius: 0.63rem;
  border-left: solid 0.031rem #ffdfdf;
  border-right: solid 0.031rem #ffdfdf;
  border-top: solid 0.031rem #ffdfdf;
  border-bottom: solid 0.031rem #ffdfdf;
}
.image_5 {
  width: 0.88rem;
  height: 0.97rem;
}
.text-wrapper_2 {
  margin-right: 0.34rem;
}
.font_3 {
  font-size: 0.88rem;
  font-family: PingFang SC;
  line-height: 0.81rem;
  color: #ffffff;
}
.image_6 {
  width: 0.81rem;
  height: 1rem;
}
.font_2 {
  font-size: 0.88rem;
  font-family: PingFang SC;
  line-height: 0.81rem;
  font-weight: 500;
  color: #1e1a1b;
}
.text_3 {
  line-height: 0.84rem;
}
.text-wrapper_3 {
  margin-right: 0.31rem;
}
.button {
  padding: 0.5rem 0;
  background-image: linear-gradient(264deg, #f63439 0%, #fe6055 100%);
  border-radius: 0.91rem;
  width: 4.88rem;
  height: 1.81rem;
}
.toolBox {
  flex: 1;
  width: 100%;
  overflow-x: auto;
  background: #ffffff;
  display: flex;
  justify-content: flex-start;
  padding-top: 0.9375rem;
}
.plugin-items-icon {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  padding-right: 1rem;
}
span {
  font-size: 12px;
}
.iconfont {
  display: inline-block;
  margin: 0 auto 5px auto;
  width: 2.5rem;
  height: 2.5rem;
}
.toolBox::-webkit-scrollbar {
  display: none;
}
.popup-item {
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  align-items: center;
}
.email-input {
  text-align: right;
  border: none;
  padding-right: 10px;
}
.pop-submit {
}
.photoshow {
  display: flex;
  align-items: center;
  position: relative;
}
.upload-complete {
  position: absolute;
  right: -38px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: green;
}
.font-22 {
  font-size: 16px;
  font-weight: 600;
}
</style>
